<template>
    <div>
        <el-card>
            <el-tabs v-model="currentStatus" @tab-click="handleTabClick">
                <el-tab-pane label="待审核" name="0"></el-tab-pane>
                <el-tab-pane label="已通过" name="1"></el-tab-pane>
                <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
            </el-tabs>
            <br>
            <el-form :inline="true">
                <el-form-item>
                    <router-link class="link-type" to="/device/deviceAllowMe">
                        <el-button type="primary"><i class="iconfont icon-shenqing"></i>申请借用</el-button>
                    </router-link>
                </el-form-item>
            </el-form>
            <br>
            <!-- 表头 -->
            <div style="height: 50px; line-height: 50px; text-align: center; backgroundColor: #eee; box-shadow: 5px 5px 2px #dedede;">
              <el-row>
                  <el-col :span="15" style="border-right: 1px solid #ddd">
                      <span>设备信息</span>
                  </el-col>
                  <el-col :span="3" style="border-right: 1px solid #ddd">
                      <span>用户信息</span>
                  </el-col>
                  <el-col :span="3" style="border-right: 1px solid #ddd">
                      <span>状态</span>
                  </el-col>
                  <el-col :span="3">
                      <span>操作</span>
                  </el-col>
              </el-row>
            </div>
            <!-- 主体部分的表格 -->
            <div style="box-shadow: 5px 5px 2px #dedede; width: 100%; margin-bottom: 18px; border-left: 1px solid #eee; border-right: 1px solid #eee" v-for="(cardData, index) in tableData" :key="index">
                <div style="color: #aaa; padding-left: 20px; backgroundColor: #dedede; height: 30px; line-height: 30px;">
                    <span>2018-08-14 17:14:33</span>
                    <span style="margin-left: 15px;">编号：{{cardData.id}}</span>
                </div>
                <div>
                    <el-row>
                        <div style="border-right: 1px solid #eee; width: 62.5%; float: left">
                            <div style="border-bottom: 1px solid #eee; margin-bottom: 0px;" v-for="(device, deviceIndex) in cardData.devices" :key="deviceIndex" class="text item">
                                <div style="float: left; border: 1px solid #eee; height: 78px; width: 78px; margin: 5px; margin-top: 0px;">
                                    <!-- 图片 -->
                                    <div>
                                        <div v-if="!device.img" style="width: 78px; height: 78px; font-size: 78px;" class="iconfont icon-22222"></div>
                                        <div v-else style="width: 78px; height: 78px;">
                                          <img src="device.img" />
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <!-- 设备信息 -->
                                    <div style="height: 30px; margin-left: 105px; margin-top: 10px;">
                                        <span>{{`设备名称：${device.name}`}}</span>
                                    </div>
                                    <div style="height: 30px; margin-left: 105px;">
                                        <span>{{`设备型号：${device.model}`}}</span>
                                    </div>
                                    <div style="height: 30px; margin-left: 105px;">
                                        <span>{{`借用/库存：${device.needCount}/${device.count}`}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="border-right: 1px solid #eee; border-bottom: 1px solid #eee; width: 12.5%; float: left">
                            <div style="height: 100px; line-height: 100px; width: 100%; float: left; text-align: center;">
                                <el-popover
                                  placement="top-start"
                                  width="200"
                                  trigger="hover">
                                  <!-- 利用分发，取代content属性 -->
                                  <el-form label-width="80px;">
                                    <el-form-item label="学号：">
                                      {{cardData.userId}}
                                    </el-form-item>
                                    <el-form-item label="专业：">
                                      {{cardData.user.major}}
                                    </el-form-item>
                                    <el-form-item label="联系电话：">
                                      {{cardData.user.phone}}
                                    </el-form-item>
                                  </el-form>
                                  <el-button slot="reference" class="iconfont icon-ren-copy1" type="text">{{cardData.user.name}}</el-button>
                                </el-popover>
                            </div>
                            <div v-for="i in cardData.devices.length-1" :key="i">
                                <span style="height: 101px; line-height: 101px;">&nbsp;</span>
                            </div>
                        </div>
                        <div style="border-right: 1px solid #eee; border-bottom: 1px solid #eee; width: 12.5%; float: left">
                            <span style="height: 100px; line-height: 100px; width: 100%; float: left; text-align: center;">
                              <span v-if="cardData.status == 0">审核中</span>
                              <span v-else-if="cardData.status == 1">已通过</span>
                              <span v-else-if="cardData.status == 2">已拒绝</span>
                            </span>
                            <div v-for="i in cardData.devices.length-1" :key="i">
                                <span style="height: 101px; line-height: 101px;">&nbsp;</span>
                            </div>
                        </div>
                        <div style="width: 12.5%; float: left; border-bottom: 1px solid #eee;">
                            <div>
                                <div style="height: 100px; line-height: 100px; width: 100%; float: left; text-align: center;">
                                    &nbsp;
                                </div>
                            </div>
                            <div v-for="i in cardData.devices.length-1" :key="i">
                                <span style="height: 101px; line-height: 101px;">&nbsp;</span>
                            </div>
                        </div>
                    </el-row>
                </div>
            </div>
            <br>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :pager-count="5"
                    :total="page.total"
                    :page-size="page.pageSize"
                    :current-page="page.currentPage"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: 10,
        pageSize: 10,
        currentPage: 1
      },
      currentStatus: '0'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 标签页
    handleTabClick(tab, event) {
      this.getList()
    },
    // 翻页器
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 获取列表
    getList() {
      request.get('/items/deviceApply/withDeviceSelf', { params: {
        size: this.page.pageSize,
        current: this.page.currentPage,
        status: parseInt(this.currentStatus) // 传递的参数为整数
      }}).then(res => {
        this.tableData = res.content.records
        this.page.total = res.content.total
      })
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-bottom: 15px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}
</style>
